<template>
  <a-drawer
    title="快捷筛选管理"
    :maskClosable="true"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 450"
    :body-style="{
      paddingBottom: '80px',
      height: 'calc(100% - 110px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    @close="closeModal"
  >
    <template v-if="!noData">
      <a-alert
        message="拖拽条目进行排序;默认列表展示前5个快捷筛选，排序第一个为默认快捷筛选。"
        type="info"
        closable
        class="mb-20"
      />
      <draggable v-model="dataList" v-bind="dragOptions" item-key="id">
        <template #item="{ element }">
          <li class="list-group-item">
            <span>{{ element.name }}</span>
            <a-button type="text" danger @click="handleFastSortDel(element.id)">
              <template #icon>
                <DeleteOutlined />
              </template>
            </a-button>
          </li>
        </template>
      </draggable>
    </template>
    <a-empty v-else description="您还没有添加快捷筛选哦~" />
    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button v-if="!noData" type="primary" @click.prevent="onSubmit"
        >保存</a-button
      >
    </div>
  </a-drawer>
</template>

<script>
import { message } from "ant-design-vue";
import { computed, defineComponent, ref, toRaw, watch } from "vue";
import draggable from "vuedraggable";
import request from "../../../../common/utils/request";
import { DeleteOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "SortManage",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    source: {
      type: Number,
      default: 1,
    },
  },
  components: { draggable, DeleteOutlined },
  setup(props, context) {
    const closeModal = () => {
      context.emit("cancel");
    };
    const onSubmit = () => {
      const sort_ids = dataList.value.map((item) => item.id);
      request
        .put("/org", "/contract/fastSearchSort", {
          sort_ids: JSON.stringify(sort_ids),
          type: props.source,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "操作成功");
          context.emit("success");
        });
    };
    const dragOptions = computed(() => {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    });
    const drag = ref(false);
    const dataList = ref([]);
    const noData = ref(false);
    const getFastSortList = () => {
      request
        .get("/org", "/contract/fastSearchList", {
          type: props.source,
        })
        .then((res) => {
          dataList.value = res.list;
          noData.value = res.list.length == 0;
        });
    };
    const handleFastSortDel = (id) => {
      const index = dataList.value.findIndex((item) => item.id == id);
      dataList.value.splice(index, 1);
    };
    const init = () => {
      getFastSortList();
    };
    const reset = () => {};
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      dataList,
      dragOptions,
      drag,
      noData,
      closeModal,
      onSubmit,
      handleFastSortDel,
    };
  },
});
</script>
<style lang="less" scoped>
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: @primary-color-bg;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #f4f4f4;
  padding: 20px;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.8);
}
</style>
